<template>
    <div>
     
        <h2>会员信息录入</h2>
        <table class="table">
            <tbody>
               <tr>
                  <td>姓名</td>
                  <td><input type="text" v-model="data.memName"></td>
               </tr>
               <tr>
                  <td>年龄</td>
                  <td><input type="text" v-model="data.age"></td>
               </tr>
               <tr>
                  <td>图片</td>
                  <td><input type='file' @change="imgurl">
                    <img :src="'https://localhost:7065'+data.img" style="height: 100px;width: 100px;">
                 </td>
               </tr>
               <tr>
                  <td>会员等级</td>
                  <td>
                    <select v-model="data.memberLevelid">
                        <option value="0">请选择会员等级</option>
                        <option value="1">青铜会员</option>
                        <option value="2">白银会员</option>
                        <option value="3">黄金会员</option>
                        <option value="4">钻石会员</option>
                        <option value="7">超级会员</option> 
                    </select>
                  </td>
               </tr>
               <tr>
                  <td>性别</td>
                  <td>
                    <input v-model="data.sex" type="radio" value="1" name="sex" checked>男
                    <input v-model="data.sex" type="radio" value="2" name="sex">女
                  </td>
               </tr>
               <tr>
                  <td>电话</td>
                  <td><input type="text" v-model="data.phone"></td>
               </tr>
               <tr>
                  <td>状态</td>
                  <td>
                    <input type="checkbox" v-model="data.state" checked>选择为启用,未选择未禁用
                  </td>
               </tr>
               <tr>
                <td colspan="2"><input type="button" value="修改" @click="add"></td>
               </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';

const router=useRouter();
const route=useRoute();
onMounted(()=>{
    getid();
    XLKS();
})
//下拉框
const XLK=ref([{
    "id": 1,
    "levelName": "",
    "state": true
  }])

const XLKS=()=>{
    axios.get("https://localhost:7065/api/LevelMember").then(res=>{
      XLK.value=res.data
    })
}

const imgurl=(e:any)=>{
    var f=e.target.files[0]
    var fs=new FormData()
    fs.append("file",f)

    axios.post("https://localhost:7065/api/Img",fs).then(res=>{
       data.value.img=res.data
    }) 
}

const getid=()=>{
    var vid = route.query.id;
    axios.get("https://localhost:7065/api/Mem/Getid",{params:{id:vid}}).then(res=>{
        data.value=res.data;
    })
}


//添加model
const data=ref({
  "id": 0,
  "memName": "",
  "age": 0,
  "img": "",
  "memberLevelid": 0,
  "sex": 0,
  "phone": "",
  "state": true
})

const add=()=>{
    axios.put("https://localhost:7065/api/Mem/Update",data.value).then(res=>{
        if(res.data>0)
    {
          alert("修改成功");
          router.push({path:"/show"})
    }
    else{
        alert("修改失败");
        return;
    }
    })
}


</script>

<style scoped>

</style>